<template>
    <div class='home'>
        <div class="top">
            <img src="../../assets/xiaomi.png" alt="" id="xiaomi-logo">
            <van-search class="top-search" v-model="value" placeholder="请输入搜索关键词" />
        </div>

        <!-- 轮播 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="banner in banners" :key="banner._id">
                <img :src="banner.coverImg" alt="">
            </van-swipe-item>
        </van-swipe>

        <!-- 导航 -->
        <div class="logo">
            <ul>
                <li>
                    <van-icon class="logo-p" name="gem-o" />
                    <p>小米商城</p>
                </li>
                <li>
                    <van-icon class="logo-p" name="gift-o" />
                    <p>小米众筹</p>
                </li>
                <li>
                    <van-icon class="logo-p" name="paid" />
                    <p>Note9</p>
                </li>
                <li>
                    <van-icon class="logo-p" name="discount" />
                    <p>以旧换新</p>
                </li>
                <li>
                    <van-icon class="logo-p" name="brush-o" />
                    <p>小米上新</p>
                </li>
            </ul>
        </div>
        

        <!-- 列表，上拉加载更多 -->
        <!-- offset 滚动条与底部距离小于offset时触发load事件 -->
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :offset="50"
            
        >
            <!-- 点击跳转详情 -->
            <div class="liebiao" >
                <van-card class="liebiao-xq" v-for="item in mycomputer " :key="item._id"
                    @click="godetail(item._id)"
                    :price="item.price"
                    :desc= "item.descriptions"
                    :title="item.name"
                    :thumb="item.coverImg"
                />
            </div>
        </van-list>
    </div>
</template>

<script>
import {reqProducts} from "../../api/products"

export default {
    
    components: {},
    data() {
        
        return {
            banners: [],
            products: [], //定义商品列表数组
            loading: false,
            finished: false,
            page: 1,
            value:'',
        };
    },
    computed: {
        mycomputer(){
            console.log(this.products);
            return this.products.filter((aaa)=>{
                // console.log(aaa);
                // console.log(this.value);
                 return aaa.name.includes(this.value)
                })
        }
    },
    watch: {},
    
    methods: {
         // 获取轮播数据
        async getBanners(){
            const result = await reqProducts();
            console.log(result.data);
            this.banners = result.data.products;
        },
        // 获取商品数据
        async getproducts(){
            this.loading = true; // 刚开始进行数据加载
            const result = await reqProducts({page: this.page});
            this.loading = false; //接口调用成功，把加载关掉
            console.log(result);
            this.products = [...this.products, ...result.data.products];  //把上一次的数据和请求过来的数据合并起来
            // 判断如果返回的数据小于10，说明数据已经加载完了，需要把finished关掉---->设置成true
            if(result.data.products.length < 10){
                this.finished = true; //没有更多数据了,加载完毕关闭开关
            }else{
                // 说明还有数据
                this.page++;  //如果还有数据，那么就需要把page+1
            }
        },
        // 当滚动条滚动到下面的时候会执行onLoad
        onLoad(){
            this.getproducts();
        },
        // 点击跳转到详情
        godetail(id){
            // 路由跳转传参方式
            // this.$router.push({
            //     // path: "/detail",
            //     // query: { id },
            //     // params只能和name配合使用
            //     name: "Detail",
            //     params: { id },
            // })
            // 动态路由跳转传参方式
            this.$router.push("/detail/" + id)
        }

    },
    created() {
        this.getBanners();
    },
    mounted() {
        
    },
    }
</script>
<style scoped>
        .my-swipe .van-swipe-item img{
        width: 80%;
        height: 260px;
        margin-left: 50px;
    }
    .top{
        display: flex;
        height: 100%;
        align-items: center;
        padding-left: 14px;
    }
    /* 顶部搜索 */
    #xiaomi-logo{
        height: 24px;
    }
    .top .top-search{
        width: 90%;
    }

    /* 列表 */
    .liebiao{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    /* 详情整体布局 */
    .liebiao-xq{
        width: 47%;
        margin: 7px 0px 0;
        padding: 3px;
    }
    /* 详情部分 */
    .van-card__header{
        display: flex;
        flex-direction: column;
    }
    /* 详情图片 */
    .van-card__header .van-card__thumb{
        width: 100% ;
        height: 100%;
        margin-bottom: 5px;
    }
    /* 详情标题 */
    .van-card__content{
        min-height: 0;
    }
    .van-card__content .van-card__title{
        font-size: 14px;
        max-height: 32px;
        min-height: 10px;
        line-height: 17px;
    }
    /* 详情页 价格 */
    .van-card__price{
        margin-top: 5px;
        color: rgb(254, 31, 29);
        font-weight: bold;
    }

    /* 导航 */
    .logo{
        background-color: #fafafa;
        margin-top: 3px;;
    }
    .logo ul{
        display: flex;
        justify-content: space-evenly;
    }
    .logo ul li{
        background:#fff;
        padding: 4px;
        width: 80px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
    }
    .logo-p{
        font-size: 32px;
    }
</style>